<template>
  <div class="page-main oilBillList">
    <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
      <el-form-item label="订单编号">
        <el-input v-model="formInline.number" placeholder="输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="加油站">
        <el-input v-model="formInline.oilName" placeholder="输入加油站名称"></el-input>
      </el-form-item>
      <el-form-item label="司机名称">
        <el-input v-model="formInline.driver" placeholder="输入司机名称"></el-input>
      </el-form-item>
      <el-form-item label="车辆名称">
        <el-input v-model="formInline.car" placeholder="输入车辆名称"></el-input>
      </el-form-item>
      <!-- <el-form-item label="核销状态">
        <el-select v-model="formInline.status" placeholder="选择核销状态" @change="initial">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="已支付" value="0"></el-option>
          <el-option label="已完成" value="1"></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="支付方式">
        <el-select v-model="formInline.payStatus" placeholder="选择支付方式" @change="initial">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="微信支付" value="0"></el-option>
          <el-option label="支付宝支付" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付时间">
        <el-date-picker
          v-model="pickerDateArr1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="(val)=>changeDatePicker(val,'payTime')"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="核销时间">
        <el-date-picker
          v-model="pickerDateArr2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="(val)=>changeDatePicker(val,'time')"
        ></el-date-picker>
      </el-form-item>
    </CustomForm>

    <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '100%' }"></CustomDescriptions>

    <el-table :data="list" style="width: 100%" height="600" align="center" v-loading="tableLoading">
      <el-table-column
        prop="name"
        label="加油站名称"
        width="250"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="oil_order" label="订单编号" width="180" align="center"></el-table-column>
      <el-table-column prop="code" label="核销码" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="加油站" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="user_name" label="司机名称" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
            {{ $maskString(scope.row.user_name) }}
        </template> 
      </el-table-column>
      <el-table-column prop="cph" label="车牌号" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="price" label="单价(L/元)" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column
        prop="num"
        label="购买数量(升/元)"
        width="120"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="money"
        label="支付金额(升/元)"
        width="120"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="add_time" label="支付时间" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jy_time" label="核销时间" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="审核状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '已支付' : '已完成' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay_status" label="支付方式" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.pay_status == 0 ? '微信支付' : '支付宝支付' }}</span>
          <!-- <span v-if="scope.row.status == 2" style="color: red;">未通过</span>
          <span v-if="scope.row.status == 1" style="color: green;">通过</span>-->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formInline.page"
      :page-sizes="$pageSizeList"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { oilBillList } from "@/api/gasStation";
export default {
  name: "oilBillList",
  data() {
    return {
      formInline: {
        time: "",
        payTime: "",
        number: "",
        oilName: "",
        car: "",
        driver: "",
        // status: "-1",
        payStatus: "-1",
        page: 1,
        pageSize: 10
      },
      descriptionsData: [
        {
          label: "总数量",
          count: 0,
          unit: "(单)"
        },
        {
          label: "总金额",
          count: 0,
          unit: "(元)"
        },
      ],
      pickerDateArr1: null,
      pickerDateArr2: null,
      switchLoading: false,
      tableLoading: true,
      list: [],
      total: 0
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      this.dialogVisible = false;
      this.tableLoading = true;
      let result = await oilBillList(this.formInline);
      if (result.status == 1) {
        this.tableLoading = false;
        this.list = result.list.data;
        this.total = result.list.total;
        this.descriptionsData[0].count = result.list.total;
        this.descriptionsData[1].count= result.money;
      }
    },
    onSubmit(data) {
      this.page = 1;
      this.initial();
    },
    resetTable() {
      this.formInline = {
        time: "",
        payTime: "",
        number: "",
        oilName: "",
        car: "",
        driver: "",
        // status: "",
        payStatus: "",
        page: 1,
        pageSize: 10
      };
      this.pickerDateArr1 = null;
      this.pickerDateArr2 = null;
      this.formInline.page = 1;
      this.formInline.pageSize = 10;
      this.initial();
    },
    handleSizeChange(pageSize) {
      this.formInline.pageSize = pageSize;
      this.formInline.page = 1;
      this.initial();
    },
    handleCurrentChange(page) {
      this.formInline.page = page;
      this.initial();
    },
    changeDatePicker(data, type) {
      if (data) {
        this.formInline[type] = data.join(" - ");
      } else {
        this.formInline[type] = "";
      }
      this.formInline.page = 1;
      this.initial();
    }
  }
};
</script>

<style lang="scss" scoped>
.oilBillList {
}
</style>
